<template>
  <slot />
  <!-- 按钮 -->
  <span
    @click="show = !show"
    :class="['btn', show ? 'fade-in' : 'fade-out']"
    :style="show ? transform : ''"
  >
    <i :class="show ? 'el-icon-right' : 'el-icon-back'" />
    <span>{{ $t('lang.form.approvalHistoryDetail') }}</span>
  </span>

  <!-- 审批历史详情详情 -->
  <transition
    mode="out-in"
    name="slide-fade"
    enter-active-class="animate__animated animate__fadeInRight"
    leave-active-class="animate__animated animate__fadeOutRight"
  >
    <div v-show="show" class="approval-history">
      <!-- 时间线 -->
      <div class="flow_time_line">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            @click="changeChart(activity)"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :timestamp="activity.timestamp"
            >{{ activity.content }}</el-timeline-item
          >
        </el-timeline>
      </div>
      <chart :info="initialValues" ref="nodeRef" :change-chart="changeChart" />
    </div>
  </transition>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, PropType, ref } from 'vue'
import Chart from '@/components/PublicProcess/Chart/flowChart.vue'
import { ObjectType } from 'typings/interfaces'
import { fetchApprovalHistoryRequest } from '@/api/process'
import { map, trimEnd } from 'lodash'
import dayjs from 'dayjs'

export default defineComponent({
  components: {
    Chart,
  },
  props: {
    initialValues: {
      type: Object as PropType<ObjectType>,
      required: true,
    },
    dialogWidth: {
      type: String,
      default: '80%',
    },
  },
  setup(props) {
    const show = ref<boolean>(false)
    const nodeRef = ref(null)
    const el = ref<ObjectType | null>({})
    const activities = ref<ObjectType[]>([])
    const color: ObjectType = { ADD: 'blue', UPDATE: '#0bbd87' }
    const changeChart = (item: ObjectType) => {
      el.value?.clear()
      props.initialValues.approvalNo = item?.processInstanceId
      el.value?.getTableData()
    }
    onMounted(() => {
      el.value = nodeRef.value
      fetchApprovalHistoryRequest(props.initialValues.id).then(({ data }) => {
        activities.value = map(data.data, (item) => ({
          ...item,
          content: item.processInstanceName,
          timestamp: dayjs(item.updateDate).format('YYYY-MM-DD HH:mm:ss'),
          color: color[item.processType],
        }))
        changeChart(activities.value[0])
      })
    })

    const transform = computed(() => {
      if (props.dialogWidth.indexOf('px') > -1) {
        const num = Number(trimEnd(props.dialogWidth, 'px'))
        return `transform: translateX(calc(-${num - 48}px));`
      }
      const num = Number(trimEnd(props.dialogWidth, '%'))
      return `transform: translateX(calc(-${num}vw + 48px));`
    })

    return {
      changeChart,
      show,
      nodeRef,
      activities,
      transform,
    }
  },
})
</script>

<style lang="scss" scoped>
.approval-history {
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 20px;
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: #fff;
  align-items: center;
  top: 0;
  right: 0;
  & > :last-child {
    flex: 1;
  }
}

.btn {
  height: auto;
  z-index: 999;
  width: 100%;
  color: black;
  text-align: center;
  display: block;
  position: absolute;
  width: 35px;
  right: 0;
  font-size: 18px;
  word-wrap: break-word;
  background: rgba($color: #4caf50, $alpha: 0.1);
  border: 2px solid #4caf50;
  padding: 10px 5px;
  border-radius: 4px;
  cursor: pointer;
  top: 50%;
}

.fade-in {
  transition: all 0.8s ease-out;
  //   transform: translateX(calc(-80vw + 48px));
}

.fade-out {
  transition: all 0.8s ease-out;
}

.el-timeline-item {
  cursor: pointer;
}
.el-timeline-item .el-timeline-item__content:hover {
  transition: all 0.5;
  color: rgba($color: #000000, $alpha: 0.5);
}
</style>
